$width: 100px;

// 标准：屏幕375px，1rem === 75px
// 375px === 100vw
// 1px === 100vw / 375
// 75px === 100vw / 375 * 75
$base: 75;
html {
  font-size: 100vw / 375 * $base;
}
// 定义最小屏幕
@media screen and (max-width: 320px) {
  $base: 64;
  html {
    font-size: 64px;
  }
}
// 定义最大屏幕
@media screen and (min-width: 540px) {
  $base: 108;
  html {
    font-size: 108px;
  }
}

// 根据需要的px计算出对应的rem
// 75px === 1rem
// 1px === 1rem / 75
// 1px * 需要的像素 === 1rem / 75 * 需要的像素
@function rem ($px) {
  @return 1rem / $base * $px;
}

body {
  font-size: 14px;
}
